<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Centering</title>

<link rel="stylesheet" type="text/css" href="../theme-remote.css" />
<style type="text/css">
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"],
    baseUrl: "../script/dojo-src/dojo/",
    modulePaths: {
        "demo": "../../demo",
        "com": "../../com"
    }
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.dijit"); // optimize: load dijit layer
    dojo.require("dijit.ColorPalette");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.NumberTextBox");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.SimpleTextarea");
    dojo.require("dijit.form.Textarea");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.InlineEditBox");
    dojo.require("dijit.Menu");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.TooltipDialog");

    dojo.require("dojox.data.AndOrWriteStore");
    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.widget.Standby");
</script>
<script type="text/javascript" src="../script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "../css/rounded-button.css";
@import "../css/rounded-corners.css";

body {
    padding: 10px;
}

div.outer {
    background-color: yellow;
}

div.inner {
    background-color: orange;
}

/* Vertical Centering Text with Line-Height */
div#vertical_center_text_box {
    height: 35px;
    line-height: 35px;
}

/* Vertical Centering Block */
div#vertical_center_block_outer_box {
    position: relative;
    height: 300px;
}

div#vertical_center_block_inner_box {
    position: absolute;
    top: 50%;
    height: 200px;
    margin-top: -100px;
}

/* CSS 3D Button */
div#coolButton {
    background: #999;
    border: 2px solid;
    border-color: #DDD #777 #777 #DDD;
    width: 100px;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    margin: 10px;
}

/* Clearing and Containing Floats */
div#float_outer_box {
    overflow: auto;
}

</style>
<script type="text/javascript">

//////////////////////////////
dojo.addOnLoad(function() {
    debug("loaded");
});

//////////////////////////////

</script>
</head>
<body class="tundra">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <!-- Vertical Centering Text with Line-Height -->
          <div id="vertical_center_text_box" class="container outer">
            <strong>Vertical Centering Text with Line-Height</strong>
          </div>

          <!-- Vertical Centering Block -->
          <div id="vertical_center_block_outer_box" class="container outer">
            <div id="vertical_center_block_inner_box" class="container inner">
              <strong>Vertical Centering Block</strong>
            </div>
          </div>

          <!-- CSS 3D Button -->
          <div id="coolButton">3D Button</div>

          <!-- Clearing and Containing Floats -->
          <div id="float_outer_box" class="container outer">
            <div id="float_inner_box" class="container inner" style="float: left">
              <strong>Clearing and Containing Floats</strong>
            </div>
          </div>

        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>

</body>
</html>
